import { Button, Space, Tooltip, Typography, theme } from "antd";
import React from "react";
const { getDesignToken } = theme;
const globalToken = getDesignToken();
import styles from "./navbar.module.less";
import { LeftOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import HeaderNavbar from "@/components/HeaderNavbar";

const workIconStyle: React.CSSProperties = {
	fontSize: "22px",
	marginRight: "4px",
	color: globalToken.colorPrimary
};

const workBtnStyle: React.CSSProperties = {
	display: "flex",
	alignItems: "center",
	padding: "0px 5px"
};

const Navbar = () => {
	const navigator = useNavigate();
	return (
		<>
			<HeaderNavbar
				leftChildren={
					<Space align="center">
						<Tooltip title="返回上一级">
							<Button
								style={workBtnStyle}
								type="text"
								shape="circle"
								icon={<LeftOutlined style={workIconStyle} />}
								onClick={() => {
									navigator("/home");
								}}
							/>
						</Tooltip>
						<Typography.Text style={{ marginBottom: 0, fontSize: "16px", fontWeight: 500 }}>门户设计</Typography.Text>
					</Space>
				}
				rightChildren={
					<div className={styles.right}>
						<Space>
							<Button>预览</Button>
							<Button type="primary">保存</Button>
						</Space>
					</div>
				}
			/>
		</>
	);
};
export default Navbar;
